<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库文件加载测试</title>
    <style>
        body {
            font-family: 'Consolas', monospace;
            background: #1a1a2e;
            color: #00ff00;
            padding: 20px;
        }
        .test-item {
            margin: 10px 0;
            padding: 10px;
            background: rgba(0, 255, 0, 0.1);
            border-left: 3px solid #00ff00;
        }
        .success { color: #00ff00; }
        .error { color: #ff0000; }
        .info { color: #00aaff; }
        pre {
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <h1>Live2D 库文件加载测试</h1>
    <div id="results"></div>

    <!-- 加载本地库文件 -->
    <script src="/libs/live2dcubismcore.min.js"></script>
    <script src="/libs/pixi.min.js"></script>
    <script src="/libs/pixi-live2d-display.min.js"></script>

    <script>
        const results = document.getElementById('results');

        function addResult(title, success, details) {
            const div = document.createElement('div');
            div.className = 'test-item';
            
            const status = success ? '<span class="success">✓ 成功</span>' : '<span class="error">✗ 失败</span>';
            const detailsHtml = details ? `<pre>${JSON.stringify(details, null, 2)}</pre>` : '';
            
            div.innerHTML = `
                <strong>${title}</strong>: ${status}
                ${detailsHtml}
            `;
            
            results.appendChild(div);
        }

        // 测试1: PIXI.js
        if (typeof PIXI !== 'undefined') {
            addResult('PIXI.js 加载', true, {
                version: PIXI.VERSION,
                type: typeof PIXI,
                hasRenderer: typeof PIXI.Renderer !== 'undefined',
                hasApplication: typeof PIXI.Application !== 'undefined'
            });
        } else {
            addResult('PIXI.js 加载', false, { error: 'PIXI is undefined' });
        }

        // 测试2: Live2D Cubism Core
        if (typeof Live2DCubismCore !== 'undefined') {
            addResult('Live2D Cubism Core 加载', true, {
                version: Live2DCubismCore.Version.csmGetVersion(),
                hasVersion: typeof Live2DCubismCore.Version !== 'undefined'
            });
        } else {
            addResult('Live2D Cubism Core 加载', false, { error: 'Live2DCubismCore is undefined' });
        }

        // 测试3: pixi-live2d-display 插件
        if (typeof PIXI !== 'undefined' && typeof PIXI.live2d !== 'undefined') {
            addResult('pixi-live2d-display 插件加载', true, {
                hasLive2DModel: typeof PIXI.live2d.Live2DModel !== 'undefined',
                namespace: Object.keys(PIXI.live2d)
            });
        } else if (typeof PIXI === 'undefined') {
            addResult('pixi-live2d-display 插件加载', false, { error: 'PIXI is undefined' });
        } else {
            addResult('pixi-live2d-display 插件加载', false, { error: 'PIXI.live2d is undefined' });
        }

        // 测试4: 尝试创建 PIXI 应用
        try {
            const testApp = new PIXI.Application({
                width: 100,
                height: 100,
                backgroundColor: 0x000000
            });
            addResult('创建 PIXI Application', true, {
                renderer: testApp.renderer.type === PIXI.RENDERER_TYPE.WEBGL ? 'WebGL' : 'Canvas',
                width: testApp.view.width,
                height: testApp.view.height
            });
            testApp.destroy(true);
        } catch (error) {
            addResult('创建 PIXI Application', false, { error: error.message });
        }

        // 测试5: 检查模型加载函数
        if (typeof PIXI !== 'undefined' && typeof PIXI.live2d !== 'undefined') {
            const hasFromMethod = typeof PIXI.live2d.Live2DModel.from === 'function';
            addResult('Live2DModel.from 方法', hasFromMethod, {
                hasMethod: hasFromMethod,
                methodType: typeof PIXI.live2d.Live2DModel.from
            });
        }

        // 测试6: 环境信息
        addResult('浏览器环境', true, {
            userAgent: navigator.userAgent,
            language: navigator.language,
            platform: navigator.platform,
            webGL: (() => {
                try {
                    const canvas = document.createElement('canvas');
                    return !!(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
                } catch (e) {
                    return false;
                }
            })()
        });

        // 最终总结
        setTimeout(() => {
            const allSuccess = typeof PIXI !== 'undefined' && 
                             typeof Live2DCubismCore !== 'undefined' && 
                             typeof PIXI.live2d !== 'undefined' &&
                             typeof PIXI.live2d.Live2DModel !== 'undefined';

            const summary = document.createElement('div');
            summary.style.marginTop = '20px';
            summary.style.padding = '20px';
            summary.style.fontSize = '18px';
            summary.style.fontWeight = 'bold';
            summary.style.border = '2px solid ' + (allSuccess ? '#00ff00' : '#ff0000');
            summary.style.borderRadius = '10px';
            summary.style.textAlign = 'center';
            
            if (allSuccess) {
                summary.className = 'success';
                summary.innerHTML = '🎉 所有库文件加载成功!系统可以正常运行!';
            } else {
                summary.className = 'error';
                summary.innerHTML = '❌ 部分库文件加载失败!请检查上述错误!';
            }
            
            results.appendChild(summary);
        }, 500);
    </script>
</body>
</html>
